<template>
  <div class="recordDetail">
    <Navbar appTitle="任务详情" @ClickRight="$router.push('/application')"/>
    <!--头部-->
    <div class="d-head pading-btm-0">
      <div class="content">
        <div class="left head-left-width">
          <div class="title">{{ detailInfo.orderCode || '-' }} | {{ detailInfo.processesName || '-' }}</div>
          <div class="row">
            <span class="r-label">生产物料：</span>
            <span class="r-column">{{ detailInfo.serialCode || "-" }} | {{ detailInfo.serialName || "-" }} | {{ detailInfo.serialSpecifications || "-" }}</span>
          </div>
          <div class="row">
            <span class="r-label">单位：</span>
            <span class="r-column">{{ detailInfo.unitName || "-" }}</span>
          </div>
          <div class="row">
            <span class="r-label">任务时间：</span>
            <span class="r-column">{{ detailInfo.planStartTime || "-" }} ~ {{ detailInfo.planEndTime || "-" }}</span>
          </div>
          <div class="row">
            <span class="r-label">任务进度：</span>
            <span class="r-column">{{ detailInfo.reportNum }} / {{ detailInfo.planNum }}</span>
          </div>
          <div class="row">
            <span class="r-label">关联订单：</span>
            <span class="r-column">{{ detailInfo.saleOrderCode || "-" }}</span>
          </div>

          <div class="pandianBox">
            <div class="status" :style="{ color:orderStatusFn(detailInfo.orderStatus).color,backgroundColor:orderStatusFn(detailInfo.orderStatus).bcColor }">{{ orderStatusFn(detailInfo.orderStatus).text }}</div>
          </div>
        </div>
        <div class="right" style="width: 0;">
          <img class="rightImg" v-if="detailInfo.flowStatus == 'RUNNING'" src="@/assets/img/shenpizhong.png" alt="">
          <img class="rightImg" v-if="detailInfo.flowStatus == 'AGREE'" src="@/assets/img/yitongguo.png" alt="">
          <img class="rightImg" v-if="detailInfo.flowStatus == 'REFUSE'" src="@/assets/img/yijujue.png" alt="">
          <img class="rightImg" v-if="detailInfo.flowStatus == 'TERMINATED'" src="@/assets/img/yichehui.png" alt="">
        </div>
      </div>
      <van-tabs v-model="active" class="v-tabs-atv">
        <van-tab title="报工信息">
      
        </van-tab>
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
      </van-tabs>
    </div>
    <!-- taps-->
    <div class="tabs-f">
      <div class="goodsWrap" v-if="active == 0">
            <div class="numList">
              <div class="item">
                <p class="ikey">报工总数</p>
                <p>{{ resultInfo.reportCountNum }}</p>
              </div>
              <div class="item">
                <p class="ikey">合格数</p>
                <p>{{ resultInfo.qualifiedCountNum }}</p>
              </div>
              <div class="item noBorder">
                <p class="ikey">不合格数</p>
                <p>{{ resultInfo.unqualifiedCountNum }}</p>
              </div>
            </div>
            <div class="goodsList" v-if="orderList.length > 0">
                   <div class="goodsBox" v-for="(item, index) in orderList" :key="index">
                <div class="content">
                  <div class="icon">
                  </div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.userText || '-' }}｜{{ item.reportTime || '-' }}
                      </p>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">合格数：</span>
                        <span class="column-c">{{ item.qualifiedNum || 0 }}</span>
                      </div>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">不合格数：</span>
                        <span class="column-c">{{ item.unqualifiedNum || 0 }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <van-empty v-else description="报工信息为空" />
          </div>

    </div>


    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import Examine from "@/components/examine";
import { getAction, postAction } from "@/api/manage";
import { apiBaseUrlDownload } from "@/utils/request";
import { APILX } from "@/api/requestLx";
const getFileListByIds = (params) =>
  getAction("/sys/common/getFileListByIds", params);
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, Examine },
  data() {
    return {
      resultInfo:{
        reportCountNum:0,
        unqualifiedCountNum:0,
        qualifiedCountNum:0
      },
      orderList: [],
      abnormalList: [],
      normalList: [],
      allList: [],
      tabAbNormal: "0",
      tabNormal: "0",
      active: 0,
      detailInfo: {},
      title: this.$route.meta.title,
      fileIds: "",
      imgUrlList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.detailInfo = this.$route.query.item
    console.log(this.detailInfo);
    this.getDetail();
  },
  methods: {
        orderStatusFn(v){
      if(v == 0){
        return {
          text:'未开始',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }else if(v == 1){
        return {
          text:'生产中',
          color:'#2B85E4',
          bcColor:'#EAF3FC'
        }
      }else if(v == 2){
        return {
          text:'已完成',
          color:'#19BE6B',
          bcColor:'#E8F9F0'
        }
      }else if(v == 3){
        return {
          text:'已取消',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }else{
        return {
          text:'-',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
    // 获取详情
    getDetail() {
      let id = this.$route.query.taskId;
      APILX.produceOrderReportWork({pageNo:1,pageSize:1000,taskId:id}).then((res) => {
        if (res.code == 200) {
          this.orderList = res.result.pageInfo.records
          this.resultInfo = {
            reportCountNum:res.result.reportCountNum,
            unqualifiedCountNum:res.result.unqualifiedCountNum,
            qualifiedCountNum:res.result.qualifiedCountNum
          }
          console.log(this.resultInfo);
        } else {
          this.$toast(res.message);
        }
      });

    },
    getTable(tabStatus) {
      let param = {
        id: this.$route.query.id,
        // id: "1517028753530834945",
        status: tabStatus,
        pageNo: "1",
        pageSize: "9999",
      };
      (this.abnormalList = []),
        (this.normalList = []),
        (this.allList = []),
        APILX.getWmsInventoryGoodsList(param).then((res) => {
          if (res.code == 200) {
            this.listData(res.result.records);
            let tableData = res.result.records;
            if (param.status == "abnormal") {
              this.tabAbNormal = res.result.total;
              this.abnormalList = tableData;
            } else if (param.status == "normal") {
              this.tabNormal = res.result.total;
              this.normalList = tableData;
            } else {
              this.allList = tableData;
            }
          } else {
            this.$toast(res.message);
          }
        });
    },
    getimgUrl(v) {
      let itemObj = {};
      for (let item of this.imgUrlList) {
        if (item.id == v) {
          itemObj = item;
        }
      }
      return itemObj.url;
    },
    //获取图片地址
    async listData(v) {
      console.log(v, "列表所有数据2");
      for (let i = 0; i < v.length; i++) {
        await getFileListByIds({ ids: v[i].attachment }).then((res) => {
          if (res.code == 200) {
            if (res.result.length > 0) {
              this.imgUrlList.push({
                url: `${apiBaseUrlDownload}jksaas-mgt/mgt/${res.result[0].uri}`,
                id: v[i].goodsId,
              });
            } else {
              this.imgUrlList.push({
                url: require("../../../assets/img/noPicture.jpg"),
                id: v[i].goodsId,
              });
            }
          } else {
          }
        });
      }
    },
    setColor(item) {
      if (
        Number(item.inventoryGoodsQualifiedNum) > Number(item.goodsQualifiedNum)
      ) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
    setColor2(item) {
      if (Number(item.inventoryGoodsScrapNum) > Number(item.goodsScrapNum)) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// @import "@/views/workManagement/materialRequisition/materialDetail.scss";
.head-left-width{
 width: 100% !important;
}

.pading-btm-0{
  padding-bottom: 0 !important;
}
.v-tabs-atv{
  width: 100%;
  margin: 0;
}

.numList{
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  background-color: #fff;
  .item{
    width: 33.33%;
    padding: 30px 0 30px 40px ;
    border-right: 1px solid #F2F2F2;
   .ikey{
margin-bottom: 32px;
color: #999999;
   }
   p{
    margin-bottom: 0;
   }
  }
  .noBorder{
    border-right: none;
   }
}

.content {
  margin-left: 0 !important;
}

.rt-row {
  margin-bottom: 20px;

  .column {
    width: 100%;
    display: flex;

    .column-t {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      // margin-bottom: 0.03rem;
    }

    .column-c {
      flex: 1;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      /* （超出限定的宽度就隐藏内容) */
      overflow: hidden;
      /* （设置文字在一行显示不能换行） */
      white-space: nowrap;
      /* （规定当文本溢出时显示省略符） */
      text-overflow: ellipsis;
    }
  }
}

// 盘点物品样式
.goodsWrap {
  // margin-top: -0.1rem;
  //   不换行
  // white-space: nowrap;
  overflow: scroll;
  // height: 60vh;
  height: 800px;
  // padding-bottom: 200px;

  //   height: 4.9rem;
  .goodsList {
    .total {
      background: #f5f8ff;
      padding: 30px;
      color: #888888;
      font-size: 28px;
      margin-bottom: -20px;
    }

    .goodsBox {
      background: #fff;
      margin-top: 20px;

      .title {
        color: #191f25;
        font-weight: bold;
        font-size: 32px;
        border-bottom: 1px solid #f5f5f5;
        padding: 30px;
        margin: 0;
        margin-bottom: 32px;
      }

      .content {
        display: flex;
        padding: 30px;
        border-bottom: 1px solid #f5f5f5;

        .icon {
          width: 6px;
          height: 32px;
          background: #1890ff;
          margin-top: 6px;
          margin-right: 20px;
        }

        .right {
          // width: 2.8rem;

          // margin-left: 0.15rem;
          .top {
            display: flex;
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;

            .code {
              width: 560px;
              margin-bottom: 16px;
              word-break: break-word;
              /* 文本行的任意字内断开 */

              word-wrap: break-word;
              /* IE */

              white-space: -moz-pre-wrap;
              /* Mozilla */

              white-space: -hp-pre-wrap;
              /* HP printers */

              white-space: -o-pre-wrap;
              /* Opera 7 */

              white-space: -pre-wrap;
              /* Opera 4-6 */

              white-space: pre;
              /* CSS2 */

              white-space: pre-wrap;
              /* CSS 2.1 */

              white-space: pre-line;
              /* CSS 3 (and 2.1 as well, actually) */
            }

            img {
              height: 36px;
              margin-top: 6px;
              //   float: right;
            }
          }

          .btn {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            div {
              width: 50%;

              .key {
                font-size: 28px;
                color: #8888;
                margin-bottom: 10px;
              }

              .val {
                color: #191f25;
                font-size: 32px;
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }

  .addgoods {
    background: #fff;
    font-size: 32px;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
}

.left {
  // width: 3.4rem;
}

.recordDetail {
  position: relative;
  // min-height: 100vh;
}

.tabs-f {
  // position: relative;
  // position: fixed;
  // top: 690px;
  width: 100% !important;
}

// /deep/ .van-tabs__nav{
//     height: 0.44rem;
//     width: 100%;
// }
.van-tab__pane {
  //     position: fixed;
}

.row {
  margin-top: 20px !important;
}

// /deep/ .van-tabs__nav {
//   left: -35px;
// }
/deep/ .van-tabs__wrap {
  background: #fff;
}

div.pandianBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: -12px;
}

div.pandianResult {
  font-size: 22px;
  margin-top: 4px;
  color: #ff6c6c;
}

/**
*用到的页面  
*materialRequisitionDetail
*addMaterialRequisitionDetail
**/
.recordDetail {
  height: 100vh;
  //   overflow-y: scroll;
  .d-head {
    // position: fixed;
    width: 100%;
    padding: 32px;
    background: #ffffff;
    z-index: 999;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 560px;
        // border: 1px solid red;
        .title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 44px;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 20px;
        }
      }
      .right {
        // border: 1px solid red;
        width: 120px;
        .rightImg {
          display: block;
          width: 110px;
          height: 110px;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 32px;
    margin-top: 20px;
    .title {
      padding-bottom: 20px;
      border-bottom: 2px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 6px;
        height: 28px;
        background: #1890ff;
      }
      .content {
        width: 126px;
        height: 32px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 44px;
        margin-left: 20px;
      }
    }
    .content {
      .row {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 32px;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          // width: 2.5rem;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 110px;
          height: 110px;
          border-radius: 20px;
        }
        .rt-column {
          width: 510px;
          //   height: 2.55rem;
          margin-left: 40px;
          .rt-title {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 32px;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 46px;
            .column {
              //    border: 1px solid red;
              width: 300px;
              .column-t {
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 6px;
              }
              .column-c {
                font-size: 32px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .search-bottom {
    height: 100px;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 22px;
    .btnconfirm {
      width: 344px;
      height: 78px;
      background: #1890ff;
      border-radius: 0;
      text-align: center;
      line-height: 78px;
      color: #ffffff;
    }
    .btncancel {
      width: 344px;
      height: 78px;
      background: #f6f6f6;
      border: 2px solid rgba(25, 31, 37, 0.12);
      border-radius: 0;
      text-align: center;
      line-height: 78px;
    }
  }
}
.contentBox {
  margin-top: 276px;
}
/deep/ .van-tabs__line {
  background-color: #1890ff;
}
/deep/ .van-tab--active {
  color: #1890ff;
}
.otherMargin {
  height: 20px;
  background: #f5f5f5;
}
.bottomLine {
  height: 20px;
  background-color: #f0f0f0;
  margin: 32px 32px 0 12px;
}
.ExamineBottom {
  height: 100px;
}
.status {
  display: inline-block;
  margin-top: 32px;
  padding: 6px 16px;
  background: #edf6ff;
  border-radius: 4px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3774ac;
}
</style>
